<template>
  <div class="app-container">
    <!-- 数据表 -->
    <div class="w-[100%] overflow-auto">
      <div class="min-w-screen-md">
        <vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" />
      </div>
    </div>

    <!-- 额外组件 -->
    <AddModule
      ref="addRef"
      :api="API"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />

    <SettingModule
      ref="settingRef"
      :api="API"
      :options="selectOption"
      @reload="gridRef?.commitProxy('query')"
    />
  </div>
</template>

<script setup>
import API from '@/api/admin/admin/i18n';
import FieldAPI from '@/api/admin/dev/field';
import { useTable } from './useTable';

import AddModule from './add.vue';
import SettingModule from './setting.vue';

// 自定义配置
const customConfig = {
  // 可以在这里添加自定义配置覆盖默认配置
  // checkboxConfig: {
  //   trigger: 'row',
  // },
  //   pagerConfig: {
  //   pageSize: 20,
  // },
  radioConfig: {
    trigger: 'row', // 触发方式
    rowField: 'id', // 行字段
  },
  treeConfig: {
    trigger: 'row', // 触发方式
    rowField: 'id', // 行字段
    keyField: 'id', // key字段
    parentField: 'pid', // 父级字段
    transform: true, // 自动将列表转为树结构
    reserve: true, // 是否保留展开状态
    expandAll: false, // 默认展开所有子孙树节点
    accordion: true, // 对于同一级的节点，每次只能展开一个
    lazy: true, // 开启懒加载
    hasChildField: 'hasChildren', // 指定后端返回的、用于判断是否有子节点的字段名
    loadMethod: async ({ row }) => {
      const { data } = await API.index({
        pid: row.id,
        lang_code: row.lang_code,
        is_leaf: null,
      });
      return data.data;
    },
  },
};

// 表格引用、配置、及初始化函数
const tableId = 'AdminI18n';
const {
  // 组件引用
  gridRef,
  addRef,
  settingRef,
  // SQL选项
  selectOption,
  // 数据表配置
  gridOptions,
  gridEvents,
  initTable,
} = useTable({ API, FieldAPI, tableId, customConfig });

// 页面加载时执行
onMounted(async () => {
  await initTable();
});

// 组件选项
defineOptions({
  name: tableId,
  inheritAttrs: false,
});
</script>
